カスタムマーケットプレイスの構築

このガイドでは、Sequenceスタックのシンプルなツールを使ってカスタムマーケットプレイスを作成する手順を説明します。これらのツールで以下のことが可能になります：

ミント：Sequence Builderからウォレットへトークンをミント
ウォレット認証：Web SDKを使ったユーザー認証
Marketplace SDKのセットアップ：Marketplace SDKの基本的な設定ガイド
コレクションの表示：マーケットプレイスで利用可能なコレクションを取得し、表示します。
出品とオファー：ユーザーがトークンを出品したり、オファーを出せるようにします。

1. ミント

まずはSequence Builderでコレクティブルを作成し、いくつかトークンをミントします。これはこちらのガイドで行えます。次のステップでは、ミントしたtokenIdを使って注文の照会や実行を行います。

2. ウォレット認証

プロジェクトには、ユーザーをウォレットで認証する仕組みが必要です。このガイドでは、GoogleやApple認証に加え、CoinbaseやMetamaskなどユーザー自身のウォレットも利用できる、Embedded WalletとWeb SDKコネクタを使用します。

パッケージのインストール

すでに優れたUIと統合されたMarketplace Boilerplateから始めることもできますし、ここではReactをゼロから使う方法もご案内します。まず、任意のフォルダ名でプロジェクトを作成します。

npm

npm create vite --template react-ts
# or
pnpm create vite --template react-ts
# or
yarn create vite --template react-ts

次に、<project_name>フォルダで必要なパッケージをインストールします。

pnpm

npm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
# or
pnpm install @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query
# or
yarn add @0xsequence/connect @0xsequence/hooks wagmi ethers viem 0xsequence @tanstack/react-query

設定ファイルを作成する

config.ts

import { createConfig } from "@0xsequence/connect";

const projectAccessKey = import.meta.env.VITE_PROJECT_ACCESS_KEY;
const waasConfigKey = import.meta.env.VITE_WAAS_CONFIG_KEY;
const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
const walletConnectId = import.meta.env.VITE_WALLET_CONNECT_ID;

export const config: any = createConfig("waas", {
  projectAccessKey,
  chainIds: [1, 137],
  defaultChainId: 1,
  appName: "Demo Dapp",
  waasConfigKey, // for waas
  google: {
    clientId: googleClientId,
  },
  walletConnect: {
    projectId: walletConnectId,
  },
});

使用するすべてのchainIdを追加してください。

main.tsxでレイアウトを作成します。

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import "./index.css";
import { config } from "./config";
import { SequenceConnect } from "@0xsequence/connect";

function Dapp() {
  return (
    <SequenceConnect config={config}>
      <App />
    </SequenceConnect>
  );
}

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Dapp />
  </StrictMode>,
)

export default Dapp;

認証コンポーネント

認証を完了するには、認証用コンポーネントが必要です。

App.tsx

import { useAccount, useDisconnect } from "wagmi";
import "./App.css";
import { useOpenConnectModal } from "@0xsequence/connect";

function App() {
  const { setOpenConnectModal } = useOpenConnectModal();
  const { isConnected, address } = useAccount();
  const { disconnect } = useDisconnect();

  function handleDisconnect() {
    disconnect();
  }

  if (isConnected && address)
    return (
      <>
        <p>User Address: {address}</p>
        <button onClick={handleDisconnect}>Disconnect</button>
      </>
    );

  return (
    <>
      <button onClick={() => setOpenConnectModal(true)}>Connect</button>
    </>
  );
}

export default App;

3. Marketplace SDKのセットアップ

Marketplace SDKは、私たちのマーケットプレイスをアプリケーションにシームレスに統合できる包括的なツールキットです。詳しくはMarketplace SDKをご覧ください。

npm install @0xsequence/connect @0xsequence/checkout @0xsequence/wallet-widget @0xsequence/marketplace-sdk @0xsequence/design-system @0xsequence/network @0xsequence/indexer @0xsequence/metadata wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion pino-pretty tailwindcss @tailwindcss/vite
# or
pnpm add @0xsequence/connect @0xsequence/checkout @0xsequence/wallet-widget @0xsequence/marketplace-sdk @0xsequence/design-system @0xsequence/network @0xsequence/indexer @0xsequence/metadata wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion pino-pretty tailwindcss @tailwindcss/vite
# or
yarn add @0xsequence/connect @0xsequence/checkout @0xsequence/wallet-widget @0xsequence/marketplace-sdk @0xsequence/design-system @0xsequence/network @0xsequence/indexer @0xsequence/metadata wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion pino-pretty tailwindcss @tailwindcss/vite

必要なCSSインポートをメインのスタイルファイルに追加します。

index.css

@import 'tailwindcss';
@import '@0xsequence/marketplace-sdk/styles/preset';
@import '@0xsequence/design-system/preset';

vite.config.tsでTailwind CSSプラグインを設定します。

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

Marketplace SDK の設定を追加する

config.ts

import { createConfig } from "@0xsequence/connect";
import type { SdkConfig } from '@0xsequence/marketplace-sdk';

const projectAccessKey = import.meta.env.VITE_PROJECT_ACCESS_KEY;
const waasConfigKey = import.meta.env.VITE_WAAS_CONFIG_KEY;
const walletConnectId = import.meta.env.VITE_WALLET_CONNECT_ID;
const projectId = import.meta.env.VITE_PROJECT_ID!;
const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID!;

export const config: any = createConfig("waas", {
  projectAccessKey,
  chainIds: [1, 137],
  defaultChainId: 1,
  appName: "Demo Dapp",
  waasConfigKey, // for waas
  google: {
    clientId: googleClientId,
  },
  walletConnect: {
    projectId: walletConnectId,
  },
});

export const marketplaceConfig = {
        projectId,
        projectAccessKey,
        walletConnectProjectId: walletConnectId
} satisfies SdkConfig;

Marketplace SDK プロバイダーを Web SDK プロバイダーと一緒に追加

main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import "./index.css";
import { config } from "./config";
import { SequenceConnect } from "@0xsequence/connect";
import {
  MarketplaceProvider,
  ModalProvider,
} from "@0xsequence/marketplace-sdk/react";
import { ThemeProvider, ToastProvider } from '@0xsequence/design-system';
import { SequenceCheckoutProvider } from "@0xsequence/checkout";
import { marketplaceConfig } from "./config";

function Dapp() {
  return (
    <ThemeProvider>
      <ToastProvider>
        <SequenceConnect config={config}>
          <SequenceCheckoutProvider>
            <MarketplaceProvider config={marketplaceConfig}>
              <App />
              <ModalProvider />
            </MarketplaceProvider>
          </SequenceCheckoutProvider>
        </SequenceConnect>
      </ToastProvider>
    </ThemeProvider>
  );
}

createRoot(document.getElementById('root')!).render(
<StrictMode>
  <Dapp />
</StrictMode>,
)

export default Dapp;

4. コレクションの表示

マーケットプレイスのコレクションを表示するために、src/components ディレクトリ内に Collections というフォルダを作成します。このフォルダ内に、index.tsx と Collection.tsx の2つのファイルを作成します。

Collection.tsx

import type { MarketCollection } from "@0xsequence/marketplace-sdk";
import { useCollection } from "@0xsequence/marketplace-sdk/react";

export const Collection = ({
  collection,
  onSelectCollection,
}: {
  collection: MarketCollection;
  onSelectCollection: (value: MarketCollection) => void;
}) => {
  const { data } = useCollection({
    chainId: collection.chainId,
    collectionAddress: collection.itemsAddress,
  });

  const logoURI = data?.logoURI;
  const image = data?.extensions.ogImage || collection.bannerUrl || logoURI;
  const description = data?.extensions.description;
  const name = data?.name;
  const symbol = data?.symbol;
  const contractType = data?.type;

  function handleOnSelectCollection() {
    onSelectCollection(collection);
  }

  return (
    <div
      onClick={handleOnSelectCollection}
      className="flex flex-col gap-2 border rounded-lg cursor-pointer w-[400px]"
    >
      <h2>
        {name} {symbol && <span>({symbol})</span>}
      </h2>
      <p>{collection.itemsAddress}</p>
      <p>Chain ID: {collection.chainId}</p>
      <img
        src={image}
        alt={collection.itemsAddress}
        className="w-[200px] h-[200px] object-cover object-center"
      />
      <p>Contract type: {contractType}</p>
      <p>{description}</p>
    </div>
  );
};

index.tsx

import type { MarketCollection } from "@0xsequence/marketplace-sdk";
import { Collection } from "./Collection";
import { useMarketplaceConfig } from "@0xsequence/marketplace-sdk/react";

export const Collections = ({ onSelectCollection }: { onSelectCollection: (value: MarketCollection) => void }) => {
    const { data } = useMarketplaceConfig();

    const collections: MarketCollection[] = data?.market.collections || [];
    return (
        <div>
            {collections?.map((collection) => (
                <Collection key={collection.itemsAddress} collection={collection} onSelectCollection={onSelectCollection} />
            ))}
        </div>
    );
};

最後に、App.tsxにCollectionsコンポーネントを追加します。

import { useAccount, useDisconnect } from "wagmi";
import "./App.css";
import { useOpenConnectModal } from "@0xsequence/connect";
import { Collections } from "./components/Collections";
import type { MarketCollection } from "@0xsequence/marketplace-sdk";
import { useState } from "react";

function App() {
  const { setOpenConnectModal } = useOpenConnectModal();
  const { isConnected, address } = useAccount();
  const { disconnect } = useDisconnect();
  const [collectionSelected, setCollectionSelected] =
    useState<MarketCollection | null>(null);

  function handleDisconnect() {
    disconnect();
  }

  function onSelectCollection(value: MarketCollection) {
    setCollectionSelected(value);
  }

  function onRestartSelectedCollectionValue() {
    setCollectionSelected(null);
  }

  if (!isConnected && !address) {
    return (
      <>
        <button onClick={() => setOpenConnectModal(true)}>Connect</button>
      </>
    );
  }

  return (
    <>
      <p>User Address: {address}</p>
      <button onClick={handleDisconnect}>Disconnect</button>
      {!collectionSelected ? (
        <Collections onSelectCollection={onSelectCollection} />
      ) : (
        <>
          <button onClick={onRestartSelectedCollectionValue}>Show Collections</button>
          <div>{JSON.stringify(collectionSelected)}</div>
        </>
      )}
    </>
  );
}

export default App;

5. 出品とオファー

このセクションでは、マーケットプレイスの出品とオファーをUIに統合します。

型定義ファイルの作成

始める前に、src/utils内にコンポーネント用の型をまとめたファイルを用意します。これを使って関数に型を付け、コードベースの一貫性と保守性を高めます。

types.ts

import type {
  MarketplaceKind,
  Order,
  OrderbookKind,
  Step,
} from "@0xsequence/marketplace-sdk";
import type { Address, Hash, Hex } from "viem";

type ModalCallbacks = {
  onSuccess?: ({ hash, orderId }: { hash?: Hash; orderId?: string }) => void;
  onError?: (error: Error) => void;
  onBuyAtFloorPrice?: () => void;
};

export type ShowBuyModalArgs = {
  orderId: string;
  chainId: number;
  collectionAddress: Address;
  collectibleId: string;
  marketplace: MarketplaceKind;
  customCreditCardProviderCallback?: (buyStep: Step) => void;
  skipNativeBalanceCheck?: boolean;
  nativeTokenAddress?: Address;
};

export type ShowCreateListingModalArgs = {
  collectionAddress: Hex;
  chainId: number;
  collectibleId: string;
  orderbookKind?: OrderbookKind;
  callbacks?: ModalCallbacks;
};
export type ShowMakeOfferModalArgs = {
  collectionAddress: Hex;
  chainId: number;
  collectibleId: string;
  orderbookKind?: OrderbookKind;
  callbacks?: ModalCallbacks;
};

export type ShowSellModalArgs = {
  collectionAddress: Hex;
  chainId: number;
  tokenId: string;
  order: Order;
  callbacks?: ModalCallbacks;
};

コレクティブル用コンポーネントのセットアップ

アイテムページおよびそのコンポーネントを作成するために、src/components ディレクトリ内にCollectiblesという新しいフォルダを追加します。このフォルダ内にindex.tsxとCollectible.tsxの2つのファイルを作成します。

Collectible.tsx

import type {
    ShowBuyModalArgs,
    ShowCreateListingModalArgs,
    ShowMakeOfferModalArgs,
    ShowSellModalArgs,
} from "../../utils//types";
import type {
    CollectibleOrder,
    MarketplaceKind,
    OrderbookKind,
} from "@0xsequence/marketplace-sdk";
import { useBalanceOfCollectible } from "@0xsequence/marketplace-sdk/react";
import type { Address } from "viem";

export const Collectible = ({
    collectible,
    chainId,
    collectionAddress,
    showBuyModal,
    showListModal,
    showOfferModal,
    showSellModal,
    address,
    isConnected,
    orderbookKind,
}: {
    collectible: CollectibleOrder;
    chainId: string;
    collectionAddress: Address;
    showBuyModal: (args: ShowBuyModalArgs) => void;
    showListModal: (args: ShowCreateListingModalArgs) => void;
    showOfferModal: (args: ShowMakeOfferModalArgs) => void;
    showSellModal: (args: ShowSellModalArgs) => void;
    address?: Address;
    isConnected: boolean;
    orderbookKind: OrderbookKind;
}) => {
    const { name, image, tokenId } = collectible.metadata;

    const { data: userBalanceResp } =
        useBalanceOfCollectible({
            chainId: Number(chainId),
            collectionAddress,
            collectableId: tokenId,
            userAddress: address,
            query: {
                enabled: !!isConnected && !!address,
            },
        });

    const tokenBalance = userBalanceResp?.balance;

    const onClickBuy = () =>
        showBuyModal({
            chainId: Number(chainId),
            collectionAddress,
            collectibleId: tokenId,
            orderId: collectible!.order!.orderId,
            marketplace: orderbookKind as unknown as MarketplaceKind,
        });

    const onClickList = () => {
        showListModal({
            collectionAddress,
            chainId: Number(chainId),
            collectibleId: tokenId,
            orderbookKind,
        });
    };

    const onClickOffer = () => {
        showOfferModal({
            collectionAddress,
            chainId: Number(chainId),
            collectibleId: tokenId,
            orderbookKind,
        });
    };

    const onAcceptOffer = () => {
        showSellModal({
            collectionAddress,
            chainId: Number(chainId),
            tokenId,
            order: collectible!.offer!,
        });
    };

    const hasOffer = Boolean(collectible?.offer);
    const sellDisabled = !isConnected || !hasOffer || !tokenBalance;
    const showActionButtons = address && isConnected;

    return (
        <div className="flex flex-col justify-center items-center border border-white">
            <h2>{name}</h2>
            <img
                src={image}
                alt={name}
                className="w-[200px] h-[200px] object-cover object-center"
            />
            {showActionButtons && (
                <>
                    {collectible.order && <button onClick={onClickBuy}>Buy</button>}
                    {tokenBalance && <button onClick={onClickList}>List</button>}
                    <button onClick={onClickOffer}>Make offer</button>
                    {!sellDisabled && (
                        <button onClick={onAcceptOffer}>Accept Offer</button>
                    )}
                </>
            )}
        </div>
    );
};

index.tsx

import { OrderbookKind, OrderSide } from "@0xsequence/marketplace-sdk";
import {
    useBuyModal,
    useCreateListingModal,
    useListCollectibles,
    useMakeOfferModal,
    useMarketplaceConfig,
    useSellModal,
} from "@0xsequence/marketplace-sdk/react";
import { Collectible } from "./Collectible";
import type { Address } from "viem";
import { useAccount } from "wagmi";

export const Collectibles = ({
    collectionId,
    chainId,
}: {
    collectionId: Address;
    chainId: number;
}) => {
    const { address, isConnected } = useAccount();
    const {
        data: collectibles,
    } = useListCollectibles({
        chainId: Number(chainId),
        collectionAddress: collectionId,
        filter: {
            // # Optional filters
            includeEmpty: true,
            // searchText: text,
            // properties,
        },
        side: OrderSide.listing,
    });

    const { data } = useMarketplaceConfig();

    const onError = (error: Error) => {
        console.error(error.message);
    };

    const { show: showBuyModal } = useBuyModal({
        onSuccess(hash) {
            console.log("Buy transaction sent with hash: ", hash);
        },
        onError,
    });

    const { show: showListModal } = useCreateListingModal({ onError });
    const { show: showOfferModal } = useMakeOfferModal({
        onError,
    });
    const { show: showSellModal } = useSellModal({ onError });

    const collectiblesFlat =
        collectibles?.pages.flatMap((p) => p.collectibles) ?? [];
    const collectionData =
        data?.market.collections?.find(
            (collection) => collection.itemsAddress === collectionId
        ) || null;
    const orderbookKind: OrderbookKind =
        (collectionData?.destinationMarketplace || "") as unknown as OrderbookKind;

    return (
        <div>
            <h1 className="text-[32px] font-semibold">Collectibles</h1>
            {collectiblesFlat?.map((collectible) => (
                <Collectible
                    key={collectible.metadata.tokenId}
                    collectible={collectible}
                    chainId={String(chainId)}
                    collectionAddress={collectionId}
                    showBuyModal={showBuyModal}
                    showListModal={showListModal}
                    showOfferModal={showOfferModal}
                    showSellModal={showSellModal}
                    address={address}
                    isConnected={isConnected}
                    orderbookKind={orderbookKind}
                />
            ))}
        </div>
    );
};

最後に、出品とオファー用のコンポーネントをApp.tsxファイルに追加します。

App.tsx

import { useAccount, useDisconnect } from "wagmi";
import "./App.css";
import { useOpenConnectModal } from "@0xsequence/connect";
import { Collections } from "./components/Collection";
import type { MarketCollection } from "@0xsequence/marketplace-sdk";
import { useState } from "react";
import { Collectibles } from "./components/Collectible/index";
import type { Address } from "viem";

function App() {
  const { setOpenConnectModal } = useOpenConnectModal();
  const { isConnected, address } = useAccount();
  const { disconnect } = useDisconnect();
  const [collectionSelected, setCollectionSelected] =
    useState<MarketCollection | null>(null);

  function handleDisconnect() {
    disconnect();
  }

  function onSelectCollection(value: MarketCollection) {
    setCollectionSelected(value);
  }

  function onRestartSelectedCollectionValue() {
    setCollectionSelected(null);
  }

  if (!isConnected && !address) {
    return (
      <>
        <button onClick={() => setOpenConnectModal(true)}>Connect</button>
      </>
    );
  }

  return (
    <>
      <p>User Address: {address}</p>
      <button onClick={handleDisconnect}>Disconnect</button>
      {!collectionSelected ? (
        <Collections onSelectCollection={onSelectCollection} />
      ) : (
        <>
          <button onClick={onRestartSelectedCollectionValue}>
            Show Collections
          </button>
          <Collectibles
            chainId={collectionSelected.chainId}
            collectionId={collectionSelected.itemsAddress as Address}
          />
        </>
      )}
    </>
  );
}

export default App;

実行とテスト

新しいページにアイテムが正常に追加され、UI上で表示されるようになりました。動作を確認するには、pnpm devを実行してください。ランディングページから任意のコレクションを選択し、その中のNFTを表示できます。出品、購入、オファーの作成や承認など、主要なフローをテストして、すべてが期待通りに動作するか確認しましょう。

​1. ミント

​2. ウォレット認証

​パッケージのインストール

​設定ファイルを作成する

​main.tsxでレイアウトを作成します。

​認証コンポーネント

​3. Marketplace SDKのセットアップ

​必要なCSSインポートをメインのスタイルファイルに追加します。

​vite.config.tsでTailwind CSSプラグインを設定します。

​Marketplace SDK の設定を追加する

​Marketplace SDK プロバイダーを Web SDK プロバイダーと一緒に追加

​4. コレクションの表示

​5. 出品とオファー

​型定義ファイルの作成

​コレクティブル用コンポーネントのセットアップ

​実行とテスト

1. ミント

2. ウォレット認証

パッケージのインストール

設定ファイルを作成する

main.tsxでレイアウトを作成します。

認証コンポーネント

3. Marketplace SDKのセットアップ

必要なCSSインポートをメインのスタイルファイルに追加します。

vite.config.tsでTailwind CSSプラグインを設定します。

Marketplace SDK の設定を追加する

Marketplace SDK プロバイダーを Web SDK プロバイダーと一緒に追加

4. コレクションの表示

5. 出品とオファー

型定義ファイルの作成

コレクティブル用コンポーネントのセットアップ

実行とテスト